<!doctype html>
<html data-framework="vue">

<head>
    <meta charset="utf-8">
    <title>Vue.js • TodoMVC</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        /* [v-cloak] {
            display: none;
        } */
    </style>
</head>


<!-- <body>
    <section class="todoapp" v-cloak>
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="写点什么吧" v-model="newTodo"
                @keyup.enter="addTodo">
        </header>
        <section class="main" v-show="todos.length">
            <input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li class="todo" v-for="todo in filteredTodos" :key="todo.id"
                    :class="{completed: todo.completed, editing: todo == editedTodo}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="todo.completed">
                        <label @dblclick="editTodo(todo)">{{todo.title}}</label>
                        <button class="destroy" @click="removeTodo(todo)"></button>
                    </div>
                    <input class="edit" type="text" v-model="todo.title" v-todo-focus="todo == editedTodo"
                        @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">
                </li>
            </ul>
        </section>
        <footer class="footer" v-show="todos.length">
            <span class="todo-count">
                <strong v-text="remaining"></strong> {{pluralize('item', remaining)}} left
            </span>
            <ul class="filters">
                <li><a href="#/all" :class="{selected: visibility == 'all'}">All</a></li>
                <li><a href="#/active" :class="{selected: visibility == 'active'}">Active</a></li>
                <li><a href="#/completed" :class="{selected: visibility == 'completed'}">Completed</a></li>
            </ul>
            <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
                Clear completed
            </button>
        </footer>
    </section>
    <footer class="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="http://evanyou.me">Evan You</a></p>
        <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
    </footer>
    <script src="js/base.js"></script>
    <script src="js/director.js"></script>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script src="js/todoapp.js"></script>
</body> -->

<body>
    <section class="todoapp">
        <header class="header">
            <h1>土豆丝</h1>
            <input class="new-todo" placeholder="写点什么吧" v-model="newTodo" @keyup.enter="addTodo($event)">
        </header>
        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox">
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <!-- v-for循环渲染showTodos的数据 -->
                <li class="todo" v-for="(todo,index) in showTodos" :key="todo.id">
                    <div class="view">
                        <input class="toggle" type="checkbox" :checked='todo.checked' @click="check(todo.id)">
                        <label> {{todo.title}}</label>
                        <button class="destroy" @click='destroyTodo(todo.id)'></button>
                    </div>
                    <input class="edit">
                </li>
            </ul>
        </section>
        <footer class="footer">
            <span class="todo-count">
                <strong>0 剩余</strong>
            </span>
            <ul class="shows">
                <li><a href="#/all" @click="show(allTodos)">全部</a></li>
                <li><a href="#/active" @click="show(activeTodos)">未完成</a></li>
                <li><a href="#/completed" @click="show(completedTodos)">完成</a></li>
            </ul>
            <button class="clear-completed">
                清空完成
            </button>
        </footer>
    </section>

    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="js/todoapp.js"></script>
</body>

</html>